<script setup>
import { onMounted, reactive } from 'vue'

const arr = reactive([
  { itemname: '防守1', id: 1 ,bgColor:'#111111'},
  { itemname: '防守2', id: 2 ,bgColor:'#222222'},
  { itemname: '防守3', id: 3 ,bgColor:'#333333'},
  { itemname: '防守4', id: 4 ,bgColor:'#444444'},
  { itemname: '防守5', id: 5 ,bgColor:'#555555'}
])

onMounted(()=>{
  let angle=360/arr.length
  let radian=angle*Math.PI/180
  arr.forEach((item, index) => {
    item.rotLeft = (Math.sin((radian*index))*300+175).toFixed(0)+'px'
    item.rotTop = (Math.cos((radian*index))*300+175).toFixed(0)+'px'
  })
  console.log(arr)
})

</script>

<template>
  <div class="about-view">
    <ul class="items">
      <li class="item" :style="`background:${item.bgColor};left:${item.rotLeft};top:${item.rotTop}`" v-for="item in arr"
        :key="item.id"></li>
    </ul>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
      <!-- 起点 -->
      <circle cx="20" cy="200" r="5" fill="red" />
      <!-- 控制点 -->
      <circle cx="100" cy="100" r="5" fill="blue" />
      <!-- 终点 -->
      <circle cx="280" cy="100" r="5" fill="blue" />
      <!-- 曲线 -->
      <path d="M 20 200 Q 140 140 280 100" stroke="black" fill="transparent" stroke-width="2"/>
    </svg>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
      <!-- 起点 -->
      <circle cx="20" cy="20" r="5" fill="blue" />
      <circle cx="20" cy="0" r="5" fill="red" />
      <!-- 控制点 -->
      <circle cx="70" cy="70" r="5" fill="green" />
      <circle cx="80" cy="60" r="5" fill="grey" />
      <!-- 终点 -->
      <circle cx="120" cy="120" r="5" fill="blue" />
      <circle cx="140" cy="120" r="5" fill="red" />
      <!-- 曲线 -->
      <path d="M 20 20 Q 70 70 120 120" stroke="black" fill="transparent" stroke-width="2"/>
      <path d="M 20 0 Q 80 60 140 120" stroke="black" fill="transparent" stroke-width="2"/>
    </svg>
  </div>
</template>

<style>
.about-view {
  height: 100%;
  width: 100%;
}

.items {
  background-color: cadetblue;
  height: 500px;
  width: 500px;
  margin: 200px;
  border-radius: 50%;
  position: relative;
}

.item {
  height: 200px;
  width: 200px;
  position: absolute;
  list-style: none;
}
</style>
